const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const prefixer = require('postcss-prefixer');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

let autoprefixer = require('autoprefixer')

exports.webpackCommonDef = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules\/(?!(lit-html))/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: "entry",
                  // caller.target will be the same as the target option from webpack
                  targets:  { chrome: "58", ie: "11" }
                }
              ]
            ]
          }
        }
      },
      {
        test: /prefix.css$/,
        use: [{
          // loader: "style-loader"
          loader: MiniCssExtractPlugin.loader,
        }, {
          loader: "css-loader"
        }, {
          loader: require.resolve('postcss-loader'),
          options: {
            plugins: () => [
              prefixer({
                prefix: 'ui-'
              }),
            ]
          }
        },]
      },
      {
        test: /app.css$/,
        use: [{
          // loader: "style-loader"
          loader: MiniCssExtractPlugin.loader,
        }, {
          loader: "css-loader"
        }, {
          loader: require.resolve('postcss-loader'),
          options: {
            plugins: () => [
            ]
          }
        },]
      },
      {
        test: /\.scss$/,
        use: [{
          // loader: "style-loader"
          loader: MiniCssExtractPlugin.loader,
        }, {
          loader: "css-loader"
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            plugins: () => [
              autoprefixer()
            ]
          }
        },{
          loader: "sass-loader",
          options: {
            // Prefer `dart-sass`
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
            },
          },
        },]
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name]/[name].css",
      chunkFilename: "[name]/[id].css"
    }),
  ]
}